import React, { useState } from 'react'
import { Layout, Dropdown, Menu, Avatar, Space } from 'antd'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined
} from '@ant-design/icons';
const { Header } = Layout
export default function TopHeader() {
  const [collapsed, setCollapsed] = useState(false)
  const changeCollapsed = () => {
    setCollapsed(!collapsed)
  }
  const menu = (
    <Menu
      items={[
        {
          key: '1',
          label: (<span>超级管理员</span>),
        },
        {
          key: '2',
          label: (<span>退出</span>),
          danger: true
        },
      ]}
    />
  );
  return (
    <Header className="site-layout-background" style={{ padding: '0 16px' }}>
      {collapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />}
      <div style={{ float: 'right' }}>
        <Space>
          <span>欢迎admin回来</span>
          <Dropdown overlay={menu}>
            <Avatar size='large' icon={<UserOutlined />} />
          </Dropdown>
        </Space>
      </div>
    </Header>
  )
}
